<template>
  <view class="searchBox">
    <div
      :class="{
        search75: isFilter,
        search100: !isFilter,
      }"
    >
      <slot name="search"></slot>
    </div>
    <view class="filter" @click="onFilter" v-if="isFilter">
      <image class="img" src="/static/image/icon_filter.png" />
      <text class="text">筛选</text>
    </view>
  </view>

  <uni-popup ref="popup" class="filterContainer" @maskClick="onMaskClick">
    <view class="filterBox">
      <view class="filterHeader">
        <text>全部筛选</text>
        <uni-icons
          class="close"
          type="closeempty"
          size="14"
          @click="onClose"
        ></uni-icons>
      </view>
      <slot name="form"></slot>
      <slot name="footer"></slot>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, onMounted, onUnmounted, defineEmits, defineExpose } from 'vue';

const props = defineProps({
  // 是否有筛选
  isFilter: {
    type: Boolean,
    default: true,
  },
  //
  title: {
    type: String,
    default: '',
  },
});
// 变量
const popup = ref(null);
// emit
const emit = defineEmits(['close']);
// 方法
const onFilter = () => {
  popup.value.open('top');
};
const onClose = () => {
  popup.value.close();
};
const onMaskClick = () => {
  console.log('mask');
};
// 生命周期
onMounted(() => {});
onUnmounted(() => {});
// 抛出
defineExpose({
  onClose,
});
</script>

<style lang="scss" scoped>
.searchBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .search75 {
    width: 75%;
    padding: 34rpx 20rpx 30rpx 36rpx;
  }
  .search100 {
    width: 100%;
    padding: 34rpx 36rpx 30rpx;
  }
  .filter {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    .img {
      width: 32rpx;
      height: 32rpx;
    }
    .text {
      font-size: 24rpx;
      color: #333333;
      line-height: 28rpx;
      padding: 0 6rpx;
    }
  }
}
.filterContainer {
  :deep(.uni-popup__wrapper) {
    height: 100vh;
  }
}
.filterBox {
  padding: 50rpx 36rpx;
  padding-top: calc(
    var(--status-bar-height) + constant(safe-area-inset-top) + 50rpx
  );
  padding-top: calc(
    var(--status-bar-height) + env(safe-area-inset-top) + 50rpx
  );
  border-radius: 0 0 52rpx 52rpx;
  max-height: 80vh;
  overflow-y: visible;
  background: #fff;
  .filterHeader {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
    padding-bottom: 40rpx;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    .close {
      position: absolute;
      right: 0;
    }
  }
}
</style>
